<template>
  <div class="product-list">
    <module-base>
      <!-- 根据url判断位置 -->
      <div class="position" id="position">
        <span>当前位置&gt;<a href="javascript:void(0);">产品中心</a>&gt;<a href="javascript:void(0);">{{selected}}</a></span>
      </div>
      <div class="product-nav">
        <ul>
           <!-- :class="{active:selectNavIndex==index}" @click="selectNavIndex=index" -->
          <li v-for="(item, index) in productNavList" @click="selectNavIndex(item.id)" :class="{active: item.id == p_id}">{{item.name}}</li>
        </ul>
      </div>
      <subtitle :zh-title="selected" :lineSpace="5"></subtitle>
      <div class="list-wrap">
        <product-item v-for="(item, index) in 12"></product-item>
      </div>
    </module-base>
  </div>
</template>

<script>
  import moduleBase from 'COMPS/module-base.vue'
  import subtitle from 'COMPS/subtitle.vue'
  import productItem from 'COMPS/product-item.vue'
  import tools from 'COMMON/tools.js'

  export default {
    name: 'product-list',
    components: {
      moduleBase,
      subtitle,
      productItem
    },
    data() {
      return {
        // productNavList: ['热门产品','雷达','超声波','定位仪'],
        productNavList: [{
          id: 0,
          name: '热门产品'
        },{
          id: 1,
          name: '雷达'
        },{
          id: 2,
          name: '超声波'
        },{
          id: 3,
          name: '定位仪'
        }],
        p_id: 0
      }
    },
    created() {
      this.p_id = tools.getArg('p_id', String(location.href).replace(/[#]*$/g, "")) || 0;
      console.log(this.p_id)
    },
    computed: {
      selected() {
        if (this.p_id == 0) {
          return '热门产品'
        } else if (this.p_id == 1) {
          return '雷达'
        } else if (this.p_id == 2) {
          return '超声波'
        } else if (this.p_id == 3) {
          return '定位仪'
        }
      }
    },
    methods: {
      selectNavIndex(id) {
        // window.location.href = "/Tpl/productList.html#position?p_id=" + id;
        this.p_id = id;
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .product-list {
    .product-nav {
      text-align: left;
      margin: 50px 0;
      >ul {
        >li {
          cursor: pointer;
          display: inline-block;
          text-align: center;
          width: 120px;
          line-height: 40px;
          margin-right: 26px;
          color: #666;
          background-color: #f0f0f0;
          transition: all 0.2s;
          &.active {
            color: #fff;
            background-color: #47beda;
          }
          &:hover {
            color: #fff;
            background-color: #47beda;
          }
        }
      }
    }
    .list-wrap {
      margin-top: 40px;
      .product-item {
        margin: 20px;
      }
    }
  }
</style>